<template>
	<view class="hbh_container2">
		<headComponent navTitle="小说简介" :isBack="true"></headComponent>
		<view class="hbh_box ableScorll">

			<view class="toping">
				<view class="left_image">
					<image v-if="infoObject.noLoad !=3"
						:src="infoObject.noLoad==1?'/static/image/loadingNovel.png':infoObject.cover_image"
						mode="scaleToFill" @error="imageError($event)" @load="imageLoad($event)">
					</image>
					<image v-if="infoObject.noLoad ==3" src="/static/image/nopic.gif" mode="scaleToFill">
					</image>
				</view>
				<view class="right_text">
					<view class="title">
						{{infoObject.book_name}}
					</view>
					<view class="type">
						<text>{{infoObject.classify_id?getNameFlag(infoObject.classify_id):'暂无分类'}}</text>
						<text></text>
						<text>已完结</text>
						<text></text>
						<text>{{infoObject.book_words_number}}</text>
					</view>
				</view>
			</view>
			<view class="author">
				<view class="author_left">
					<view class="left_box">
						<image v-if="infoObject.noLoad !=3"
							:src="infoObject.noLoad==1?'/static/image/loadingNovel.png':infoObject.cover_image"
							mode="scaleToFill" @error="imageError($event)" @load="imageLoad($event)">
						</image>
						<image v-if="infoObject.noLoad ==3" src="/static/image/nopic.gif"
							mode="scaleToFill"></image>
					</view>
					<view class="main_box">
						<view class="one">
							<text>{{infoObject.authorName}}</text>
							<text>原作者</text>
						</view>
						<view class="two">
							了解原著作者其他作品
						</view>
					</view>
				</view>
				<view class="right_box">
					<text @click="goTo(infoObject.authorSrc)">》 前往</text>
				</view>
			</view>
			<view class="line">

			</view>
			<view class="info">
				<view class="info_title">
					书籍简介
				</view>
				<view class="jianjie">
					<view :class="flag?'text_content2':'text_content'" v-html="infoObject.book_describe">

					</view>
					<view class="text_btn" @click="open">
						{{flag?'收起':'展开'}}
					</view>
				</view>
			</view>
			<view class="line">

			</view>
			<view class="book_list">
				<text @click="seeList">查看目录</text><text>最近更新第{{total}}章节></text>
			</view>
			<view class="line">

			</view>
			<view class="fixedBox">
				<text @click="download">下载(开发中)</text>
				<text @click="startRead">免费阅读</text>
			</view>
			<!--  -->
			<BookList v-if="isShow" :list="list" @changList="changList" :book_id="book_id" @putStatus="putStatus">
			</BookList>
		</view>
	</view>
</template>

<script>
	import BookList from "@/components/bookList/bookList.vue"
	import {
		getNovelDetailInfo,
		getNovelList
	} from "@/api/index.js"
	import {
		getName
	} from "@/common/getNovelNameDict.js"
	export default {
		data() {
			return {
				src: "https://mp-cf9e512d-860a-4ebf-ae9a-ab57d623ff8a.cdn.bspapp.com/cloudstorage/4c627eca-a6f7-466b-8bde-d2b6ee65170c.jpg",
				flag: false,
				isShow: false,
				bookName: "龙王归来",
				book_id: "",
				total: 0,
				infoObject: {

				},
				list: [],
				authorSrc: ""
			};
		},
		components: {
			BookList
		},
		onLoad(option) {
			console.log(option)
			this.book_id = option.book_id
			if (this.book_id) {
				this.getNovelInfo()
				let res = uni.getStorageSync("list")
				if (res) {
					if (JSON.parse(res).book_id == this.book_id) {
						this.list = JSON.parse(res).data
					}
				}
				this.getList()

			}
		},
		methods: {
			imageError(e) {
				this.$set(this.infoObject, 'noLoad', 3)
			},
			imageLoad(e) {
				this.$set(this.infoObject, 'noLoad', 2)
			},
			goTo(val) {
				// // #ifdef APP-PLUS
				// plus.runtime.openURL(val)
				// // #endif
				uni.navigateTo({
					url: "/pages/authorCenter/authorCenter?src=" + val
				})
			},
			download() {
				uni.showToast({
					icon: "none",
					title: "开发中!"
				})
			},
			changList() {
				this.list = this.list.reverse()
			},
			getNameFlag(id) {
				return getName(id)
			},
			getNovelInfo() {
				uni.showLoading({
					title: "获取信息中...",
					mask: true
				})
				getNovelDetailInfo({
					book_id: this.book_id
				}).then((res) => {
					console.log(res)
					if (res.code == 200) {
						this.total = res.total
						res.data.noLoad = 1
						this.infoObject = res.data
						this.bookName = this.infoObject.book_name
						console.log(this.infoObject)
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			getList() {
				getNovelList({
					book_id: this.book_id
				}).then((res) => {
					console.log(res, "--------------")
					if (res.code == 200) {
						this.list = res.data
						uni.setStorageSync("list", JSON.stringify({
							book_id: this.book_id,
							data: res.data
						}))
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			//免费阅读
			startRead() {
				uni.navigateTo({
					url: `/pages/contentDetail/contentDetail?bookName=${this.bookName}&book_id=${this.book_id}`
				})
			},
			//展开收起
			open() {
				this.flag = !this.flag
				if (this.flag) {
					console.log("展开")
				} else {
					console.log("收起")
				}
			},
			//查看目录
			seeList() {
				this.isShow = !this.isShow
			},
			putStatus(val) {
				this.isShow = val
			}
		}
	}
</script>

<style lang="scss">
	.ableScorll {
		overflow-y: scroll;
	}

	.fixedBox {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		width: 100%;
		height: 100rpx;
		background-color: #f7f7f7;
		border-top: 1rpx solid #f7f7f7;
		display: flex;
		justify-content: space-around;
		align-items: center;

		text:nth-of-type(1) {
			padding: 5rpx 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 20rpx;
		}

		text:nth-of-type(2) {
			padding: 5rpx 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			background-color: #00aaff;
			border-radius: 20rpx;
		}
	}

	.book_list {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		align-items: center;

		text:nth-of-type(1) {
			font-size: 36rpx;
			font-weight: bold;
		}

		text:nth-of-type(2) {
			color: #ccc;
			font-size: 28rpx;
		}
	}

	.info {
		.info_title {
			font-size: 36rpx;
			color: #000;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.jianjie {
			display: flex;
			align-items: flex-end;
			flex-wrap: nowrap;
			font-size: 32rpx;

			.text_content {
				flex: 1;
				text-overflow: ellipsis;
				text-indent: 2em;
				overflow: hidden;
				text-overflow: ellipsis; //文本溢出部分用省略号表示
				display: -webkit-box; //特别显示模式
				-webkit-line-clamp: 2; //行数
				line-clamp: 2;
				-webkit-box-orient: vertical; //盒子中内容竖直排列
			}

			.text_content2 {
				flex: 1;
				text-indent: 2em;
			}

			.text_btn {
				width: 80rpx;
				text-align: center;
				display: flex;
				color: #55aaff;
				justify-content: flex-end;
				align-items: flex-end;
			}



		}


	}

	.line {
		height: 2rpx;
		background-color: #ccc;
		margin: 40rpx 0rpx;
	}

	.author {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;

		.author_left {
			display: flex;
			align-items: flex-end;
			flex: 1;
			padding-right: 20rpx;
			box-sizing: border-box;

			.left_box {
				width: 100rpx;
				height: 100rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}

			.main_box {
				flex: 1;
				margin-left: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				height: 100rpx;

				.one {

					text:nth-of-type(1) {
						color: red;
						font-size: 34rpx;
						font-weight: bold;
					}

					text:nth-of-type(2) {
						height: 34rpx;
						padding: 2rpx 4rpx;
						box-sizing: border-box;
						margin-left: 20rpx;
						font-size: 26rpx;
						line-height: 34rpx;
						color: #fff;
						background-color: goldenrod;
						border-radius: 5rpx;
					}
				}

				.two {
					font-size: 30rpx;
					color: #ccc;
				}
			}
		}

		.right_box {
			width: 120rpx;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				width: 100rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				padding: 0 10rpx;
				border-radius: 25rpx;
				font-size: 28rpx;
				background-color: #00aaff;
				color: #ffffff;

			}
		}

	}

	.toping {
		height: 300rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 60rpx;

		.left_image {
			width: 38%;
			height: 300rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 278rpx;
				height: 288rpx;
				border-radius: 10rpx;
			}
		}

		.right_text {
			width: 62%;
			height: 300rpx;

			.title {
				height: 160rpx;
				color: #000;
				font-weight: bolder;
				font-size: 40rpx;
			}

			.type {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #7a7a5b;

				text:nth-of-type(2) {

					width: 8rpx;
					height: 8rpx;
					border-radius: 50%;
					background-color: #7a7a5b;
				}

				text:nth-of-type(4) {
					width: 8rpx;
					height: 8rpx;
					border-radius: 50%;
					background-color: #7a7a5b;
				}

			}
		}
	}
</style>